<template>
  <view class="setting-page">
    <!-- 头像设置 -->
    <view class="setting-item">
      <text class="item-label">头像</text>
      <image :src="avatar" class="avatar" mode="aspectFit" @click="changeAvatar"></image>
    </view>
    
    <!-- 昵称设置 -->
    <view class="setting-item">
      <text class="item-label">昵称</text>
      <input v-model="nickname" class="item-input" placeholder="请输入昵称" @blur="saveNickname" />
    </view>
    
    <!-- 手机号设置 -->
    <view class="setting-item">
      <text class="item-label">手机号</text>
      <input v-model="phone" class="item-input" placeholder="请输入手机号" @blur="savePhone" disabled />
    </view>
    
    <!-- 性别设置 -->
    <view class="setting-item">
      <text class="item-label">性别</text>
      <picker v-model="gender" :range="genderList" @change="saveGender">
        <view class="picker">{{ genderText }}</view>
      </picker>
    </view>
    
    <!-- 清理缓存 -->
    <view class="setting-item" @click="clearCache">
      <text class="item-label">清理缓存</text>
      <text class="item-value">{{ cacheSize }}</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        avatar: '/static/mine.png',
        nickname: '管理员',
        phone: '13800138000',
        gender: 2,
        cacheSize: '10MB',
		genderList:['男','女']
      }
    },
    computed: {
      genderText() {
        const genderList = ['男', '女', '未设置']
        return genderList[this.gender]
      }
    },
    methods: {
      changeAvatar() {
        // 更换头像逻辑
        console.log('点击更换头像')
      },
      saveNickname() {
        // 保存昵称逻辑
        console.log('保存昵称:', this.nickname)
      },
      savePhone() {
        // 保存手机号逻辑
        console.log('保存手机号:', this.phone)
      },
      saveGender(e) {
        this.gender = e.detail.value
        // 保存性别逻辑
        console.log('保存性别:', this.genderText)
      },
      clearCache() {
        // 清理缓存逻辑
        uni.showToast({
        	title:'清理成功',
			icon:'none'
        })
        this.cacheSize = '0MB'
      }
    }
  }
</script>

<style lang="scss">
.setting-page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 20rpx ;
  box-sizing: border-box;
}

.setting-item {
  background-color: #fff;
  padding: 30rpx 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1rpx solid #eee;
}

.item-label {
  font-size: 32rpx;
  color: #333;
}

.avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
}

.item-input {
  flex: 1;
  text-align: right;
  font-size: 32rpx;
  color: #666;
  padding-right: 20rpx;
}

.picker {
  font-size: 32rpx;
  color: #666;
}

.item-value {
  font-size: 32rpx;
  color: #666;
}
</style>
